<template>
	<view class="addBank">
		<view class="name inputBox">
			<view class="title">
				持卡人
			</view> <input type="text" v-model="name" placeholder="持卡人姓名" />
		</view>
		<view class="name inputBox">
			<view class="title">
				卡号
			</view> <input type="text" v-model="bankCard"  placeholder="银行卡卡号" />
		</view>
		<view class="name inputBox">
			<view class="title">
				身份证
			</view> <input type="text" v-model="idCard" placeholder="身份证号码" />
		</view>
		<view class="name inputBox">
			<view class="title">
				手机号
			</view> <input type="text" v-model="phone" placeholder="银行预留手机号" />
		</view>
		<view class="submitBtn" @tap="submit">
			同意协议并验证手机号
		</view>
		<view class="goWebView" @tap="goWebView">
			查看 <text>《支付服务协议》</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				name:"",
				bankCard:"",
				idCard:"",
				phone:""
			}
		},
		methods:{
			submit(){
				if(this.name == ""){
					uni.showToast({
						title:"姓名不能为空",
						icon:"none"
					})
					return
				}
				if(this.bankCard == ""){
					uni.showToast({
						title:"银行卡号不能为空",
						icon:"none"
					})
					return
				}
				if(this.idCard == ""){
					uni.showToast({
						title:"身份证号不能为空",
						icon:"none"
					})
					return
				}
				if(this.phone == ""){
					uni.showToast({
						title:"手机号不能为空",
						icon:"none"
					})
					return
				}
				if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.idCard)){
					uni.showToast({
						title:"请输入正确的身份证号",
						icon:"none"
					})
					return
				}
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:"none"
					})
					return
				}
				let data = {
					name:this.name,
					bankCard:this.bankCard,
					idCard:this.idCard,
					phone:this.phone
				}
				uni.navigateTo({
					url:"getCode?params=" + encodeURIComponent(JSON.stringify(data))
				})
				
			},
			goWebView(){
				uni.navigateTo({
					url:"../agreement/agreement?type=4"
				})
			}
		}
	}
</script>

<style lang="scss">
	.addBank{
		width: 616upx;
		margin: 0 auto;
		.inputBox{
			font-size: 28upx;
			color: #333333;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1upx solid #e6e6e6;
			line-height: 60upx;
			margin-top: 20upx;
			.title{
				width: 100upx;
				margin-right: 40upx;
			}
			input{
				width: 330upx;
			}
		}
		.submitBtn{
			width:616upx;
			height:104upx;
			background:linear-gradient(0deg,rgba(227,67,57,1),rgba(249,98,58,1));
			// opacity:0.5;
			border-radius:20upx;
			color: #FFFFFF;
			font-size: 40upx;
			text-align: center;
			line-height: 104upx;
			margin-top: 50upx;
		}
		.goWebView{
			margin-top: 42upx;
			text-align: center;
			color: #999;
			text{
				color: #5E85C5;
			}
		}
	}
</style>
